
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body class="form">
  <form>
    <label>
      <span>用户名</span>
      <input type="text">
    </label>
    <label>
      <span>密码</span>
      <input type="password">
    </label>
    <section>
      <button type="button" onclick="window.location.href='/reg.html'">去注册</button>
      <button type="button" id="submit">登陆</button>
    </section>
  </form>
</body>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script>
  var input = $('input')
  // 页面打开自动赋值
  input[0].value = localStorage.getItem('username')
  // 登陆事件
  $('#submit').on('click', () => {
    var username = input[0].value;
    var password = input[1].value;
    // 1. 前端校验
    if (username.length < 2 || username.length > 10) {
      return alert("非法的用户名！")
    }
    if (password.length < 6 || password.length > 20) {
      return alert("非法的密码！")
    }
    // end 提交ajax
    $.ajax({
      url: "http://websong.wang:4000/user",
      method: "post",
      data: {
        username,
        password
      }
    }).then(res => {
      if (res.code === 1) {
        // 1. 把用户信息存储起来
        localStorage.setItem('userinfo', JSON.stringify(res.result))
        // 2. 跳转到首页
        location.href = './index.html'
      } else {
        alert(res.msg)
      }
    })
  })
</script>

</html>